<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>产品销量饼状图</span>
          </div>
          <div ref="left" style="height: 480px; margin: 0 auto;" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>月度销售额柱状图</span>
          </div>
          <div class="block">
    <el-date-picker
      v-model="date"
      type="datetimerange"
      value-format="yyyy-MM-dd HH:mm:ss"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['00:00:00']" @change="dateChange">
    </el-date-picker>
    <el-button type="primary" @click="year">年</el-button>
    <el-button type="primary" @click="month">月</el-button>
    <el-button type="primary" @click="day">日</el-button>
  </div>
          <div ref="right" style="height: 480px; margin: 0 auto;" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getPieData, getBarData } from '@/api/order/pie'
export default {
  name: 'Dashboard',
  data() {
    return {
      date: '',
      timeMode: '天',
      datequery: '',
      barData: {
        text: '',
        subtext: '',
        xAxisData: [],
        seriesData: []
      }
    }
  },
  created() {},
  mounted() {
    getPieData().then((response) => {
      const pieData = response.data
      this.initPieChart(pieData)
    })
    this.initBarChart()
  },
  methods: {
    /** 初始化饼状图 */
    initPieChart(pieData) {
      var pieChart = this.$echarts.init(this.$refs.left)
      var option = {
        title: {
          text: '热卖商品分析报表',
          subtext: '按产品类型统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '占所有产品的',
            type: 'pie',
            radius: '50%',
            // data: [
            //   { value: 48, name: '钢笔' },
            //   { value: 60, name: '铅笔盒' },
            //   { value: 73, name: '日记本' },
            //   { value: 58, name: '毛巾' },
            //   { value: 48, name: '香波' },
            //   { value: 30, name: '拖鞋' }
            // ],
            data: pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      option && pieChart.setOption(option)
    },
    /** 初始化柱状图 */
    initBarChart(barData) {
      var pieChart = this.$echarts.init(this.$refs.right)
      var option = {
        title: {
          text: barData.text,
          subtext: barData.subtext,
          left: 'center'
        },
        xAxis: {
          type: 'category',
          //data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          data: barData.xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            //data: [120, 200, 150, 80, 70, 110, 150, 180, 90, 100, 140, 160],
            data:barData.seriesData,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
      option && pieChart.setOption(option)
    },

    getBarData() {
      this.barData.xAxisData =[]
      this.barData.seriesData = []
      getBarData(this.datequery).then(response => {
        this.barData.text = this.timeMode + '度销售额统计报表'
        this.barData.subtext = '按' + this.timeMode + '统计'
        if(response.data) {
          response.data.forEach((item) => {
          this.barData.xAxisData.push(item.time)
          this.barData.seriesData.push(item.sum)
        })
        this.initBarChart(this.barData)
        } else {
          this.$message({
            type: 'text',
            message: '暂无统计数据!'
          })
        }
      })
    },

    dateChange(date) {
      console.log(date)
      this.datequery = {
        timeMode: this.timeMode,
        startTime: date[0],
        endTime: date[1]
      }
    },

    year() {
      this.datequery.timeMode = '年'
      this.getBarData()
    },

    month() {
      this.datequery.timeMode = '月'
      this.getBarData()
    },

    day() {
      this.datequery.timeMode = '天'
      this.getBarData()
    }
  }
}
</script>
